<template>
  <el-row class="login-container" justify="center" align="middle">
    <el-card style="max-width: 480px;">
      <template #header>
        <div class="login-header">
          <img src="../../../public/login-head.png" alt="">
        </div>
      </template>
      <div class="jump-link">
        <el-link type="primary" @click="handleChange">{{ formType ? '返回登录' : "注册账号" }}</el-link>
      </div>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef">
        <el-form-item prop="userName">
          <el-input v-model="loginForm.userName" placeholder="手机号" prefix-icon="UserFilled"></el-input>
        </el-form-item>
        <el-form-item prop="passWord">
          <el-input v-model="loginForm.passWord" type="password" placeholder="密码" prefix-icon="Lock"></el-input>
        </el-form-item>
        <el-form-item prop="validCode" v-if="formType">
          <el-input v-model="loginForm.validCode" placeholder="验证码" prefix-icon="Lock">
            <template #append>
              <span @click="countdownChange">{{ countdown.validText }}</span>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :style="{ width: '100%' }" @click="submitForm(loginFormRef)">
            {{ formType ? '注册账号' : '登录' }}
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>
</template>

<script setup>
import { ref, reactive, computed, toRaw } from 'vue';
import { ElMessage } from 'element-plus'
import { getCode, userAuthentication, login, menuPermission } from '../../api/index'
import { useRouter } from 'vue-router'
import { useStore } from 'vuex';

const routerlist = computed(() => {
  return store.state.menu.routerList
})
const router = useRouter()
const store = useStore()
const loginFormRef = ref()
//表单数据
const loginForm = reactive({
  userName: '',
  passWord: '',
  validCode: ''
})
//验证码
const countdown = reactive({
  validText: '获取验证码',
  time: 10
})
const formType = ref(0)
//切换登录和注册
const handleChange = () => {
  formType.value = formType.value ? 0 : 1
}
let flag = false
const countdownChange = () => {
  //如果已发送不处理
  if (flag) return
  //判断手机号是否正确
  const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
  if (!loginForm.userName || !phoneReg.test(loginForm.userName)) {
    return ElMessage({
      message: '请检查手机号是否正确',
      type: 'warning'
    })
  }
  const time = setInterval(() => {
    if (countdown.time <= 0) {
      countdown.time = 10
      countdown.validText = `获取验证码`
      flag = false
      clearInterval(time)
    } else {
      countdown.time -= 1
      countdown.validText = `剩余${countdown.time}秒`
    }
  }, 1000)
  flag = true
  getCode({ tel: loginForm.userName }).then(({ data }) => {
    console.log(data);
    if (data.code == 10000) {
      ElMessage.success('发送成功')
    }
  })
}
const validateUser = (rule, value, callback) => {
  //不能为空
  if (value === '') {
    callback(new Error('请输入账号'))
  } else {
    const phoneReg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
    phoneReg.test(value) ? callback() : callback(new Error('手机号格式不对，请输正确手机号格式'))
  }
}
const validatePassword = (rule, value, callback) => {
  //不能为空
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    const Reg = /^[a-zA-Z0-9_-]{4,16}$/
    Reg.test(value) ? callback() : callback(new Error('密码格式不对，需要4到16位'))
  }
}
const rules = reactive({
  userName: [{ validator: validateUser, trigger: 'blur' }],
  passWord: [{ validator: validatePassword, trigger: 'blur' }]
})
const submitForm = async (loginFormRef) => {
  if (!loginFormRef) return
  await loginFormRef.validate((valid, fields) => {
    if (valid) {
      //注册页面
      if (formType.value) {
        userAuthentication(loginForm).then(({ data }) => {
          if (data.code === 10000) {
            ElMessage.success('注册成功，请登录')
            formType.value = 0
          }
        })
      }
      else {
        //登录页面
        login(loginForm).then(({ data }) => {
          ElMessage.success('登录成功')
          //token缓存
          localStorage.setItem('pz_token', data.data.token)
          localStorage.setItem('pz_userInfo', JSON.stringify(data.data.userInfo))
          menuPermission().then(({ data }) => {
            store.commit('dynamicMenu', data.data)
            console.log(routerlist);
            toRaw(routerlist.value).forEach(item => {
              router.addRoute('main', item)
            })
            router.push(
              {         
                path: '/'
              }
            )
          })
        })
      }
    }
    else {
      console.log("error");
    }
  })
}
</script>

<style lang="less" scoped>
:deep(.el-card__header) {
  padding: 0;
}

.login-container {
  height: 100%;

  .login-header {
    background-color: #899fe1;
    width: 480px;

    img {
      width: 430px;
    }
  }
}

.jump-link {
  text-align: right;
  margin-bottom: 10px;
}
</style>
